<template>
  <div>
    <!-- 添加或修改运管备案查询对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="1200px"
      append-to-body
      :close-on-click-modal="false"
      @close="close"
      class="self-dialog"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="first">
          <el-form
            ref="form"
            :model="form"
            :rules="rules"
            label-width="148px"
            label-position="right"
            class="flex-form-3"
            size="small"
          >
            <el-form-item label="主管海关" prop="mainPort">
              <el-select
                v-model.trim="form.mainPort"
                placeholder="请选择主管海关"
              >
                <el-option
                  v-for="(item, index) in customsList"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="国内车牌" prop="domesticLisenceNo">
              <el-input
                v-model.trim="form.domesticLisenceNo"
                placeholder="请输入国内车牌"
              />
            </el-form-item>
            <el-form-item label="外籍车牌" prop="foreignLicense">
              <el-input
                v-model.trim="form.foreignLicense"
                placeholder="请输入外籍车牌"
              />
            </el-form-item>
            <el-form-item label="车架号" prop="veFrameNo">
              <el-input
                v-model.trim="form.veFrameNo"
                placeholder="请输入车架号"
              />
            </el-form-item>
            <el-form-item label="车辆注册地" prop="veRegPlace">
              <el-select
                v-model.trim="form.veRegPlace"
                placeholder="请选择车辆注册地"
              >
                <el-option
                  v-for="(item, index) in dict.type.sw_vehicle_reg_place"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="使用性质" prop="veProperty">
              <el-select
                v-model.trim="form.veProperty"
                placeholder="请选择使用性质"
              >
                <el-option
                  v-for="(item, index) in dict.type.sw_vehicle_property"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="车辆运输资格" prop="veConveyQua">
              <el-select
                v-model.trim="form.veConveyQua"
                placeholder="请选择车辆运输资格"
                multiple
              >
                <el-option
                  v-for="(item, index) in dict.type.sw_vehicle_convey_qua"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="车辆类型(型样)" prop="veType">
              <el-select
                v-model.trim="form.veType"
                placeholder="请选择车辆类型(型样)"
              >
                <el-option
                  v-for="(item, index) in dict.type.sw_vehicle_type"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="厂牌" prop="brand">
              <el-input v-model.trim="form.brand" placeholder="请输入厂牌" />
            </el-form-item>
            <el-form-item label="车辆分类" prop="veClassFlag">
              <el-select
                v-model.trim="form.veClassFlag"
                placeholder="请选择车辆分类"
                filterable
              >
                <el-option
                  v-for="(item, index) in dict.type.sw_vehicle_class_flag"
                  :key="index"
                  :label="item.value + '-' + item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="国籍" prop="nationality">
              <el-select
                v-model.trim="form.nationality"
                placeholder="请选择国籍"
                filterable
              >
                <el-option
                  v-for="(item, index) in dict.type.mft_route_countrys"
                  :key="index"
                  :label="item.value + '-' + item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="车辆出厂日期" prop="veFactoryDate">
              <el-date-picker
                clearable
                size="small"
                v-model.trim="form.veFactoryDate"
                type="date"
                value-format="yyyyMMdd"
                placeholder="选择车辆出厂日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="自重" prop="selfWt">
              <el-input-number
                v-model.trim="form.selfWt"
                :min="0"
                label="请输入自重"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="准牵引总质量" prop="allowTowTotalWt">
              <el-input-number
                v-model.trim="form.allowTowTotalWt"
                :min="0"
                label="请输入准牵引总质量"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="货箱内部长度" prop="containerInnerLength">
              <el-input-number
                v-model.trim="form.containerInnerLength"
                :min="0"
                label="请输入货箱内部长度"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="货箱内部宽度" prop="containerInnerWidth">
              <el-input-number
                v-model.trim="form.containerInnerWidth"
                :min="0"
                label="请输入货箱内部宽度"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="货箱内部尺寸" prop="containerInnerHeight">
              <el-input-number
                v-model.trim="form.containerInnerHeight"
                :min="0"
                label="请输入货箱内部尺寸"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="外廓长度" prop="outerLength">
              <el-input-number
                v-model.trim="form.outerLength"
                :min="0"
                label="请输入外廓长度"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="外廓宽度" prop="outerWidth">
              <el-input-number
                v-model.trim="form.outerWidth"
                :min="0"
                label="请输入外廓宽度"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="外廓高度" prop="outerHeight">
              <el-input-number
                v-model.trim="form.outerHeight"
                :min="0"
                label="请输入外廓高度"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="排气量" prop="exhaustCapacity">
              <el-input-number
                v-model.trim="form.exhaustCapacity"
                :min="0"
                label="请输入排气量"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="油箱容量" prop="oilBoxCapcity">
              <el-input-number
                v-model.trim="form.oilBoxCapcity"
                :min="0"
                label="请输入油箱容量"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="核定载量(人或千克)" prop="veTon">
              <el-input-number
                v-model.trim="form.veTon"
                :min="0"
                label="核定载量(客车-人；货车-千克)"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="批文/许可证编号" prop="apprNo">
              <el-input
                v-model.trim="form.apprNo"
                placeholder="请输入批文/许可证编号"
              />
            </el-form-item>
            <el-form-item label="批文/许可证有效期" prop="apprPeriod">
              <el-date-picker
                clearable
                size="small"
                v-model.trim="form.apprPeriod"
                type="date"
                value-format="yyyyMMdd"
                placeholder="选择批文/许可证有效期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="最新申请业务类型" prop="currApplyBussiness">
              <el-input
                v-model.trim="form.currApplyBussiness"
                placeholder="请输入最新更新申请业务类型"
              />
            </el-form-item>
            <el-form-item label="申请人" prop="proposer">
              <el-input
                v-model.trim="form.proposer"
                placeholder="请输入申请人"
              />
            </el-form-item>
            <el-form-item label="企业代码" prop="coCode">
              <el-input
                v-model.trim="form.coCode"
                placeholder="请选择企业"
                @focus="coCodeFocus"
              />
            </el-form-item>

            <el-form-item label="国内车牌颜色" prop="domesticLicenseColor">
              <el-input
                v-model.trim="form.domesticLicenseColor"
                placeholder="请输入国内车牌颜色"
              />
            </el-form-item>
            <el-form-item label="车辆指标编号" prop="veTargetNo">
              <el-input
                v-model.trim="form.veTargetNo"
                placeholder="请输入车辆指标编号"
              />
            </el-form-item>
            <el-form-item label="车辆行驶证编号" prop="veCardNo">
              <el-input
                v-model.trim="form.veCardNo"
                placeholder="请输入车辆行驶证编号"
              />
            </el-form-item>
            <el-form-item label="车辆登记车主名称" prop="veOwnerName">
              <el-input
                v-model.trim="form.veOwnerName"
                placeholder="请输入车辆登记车主名称"
              />
            </el-form-item>
            <el-form-item label="登记车主证件号码" prop="veOwnerNo">
              <el-input
                v-model.trim="form.veOwnerNo"
                placeholder="请输入车辆登记车主证件号码"
              />
            </el-form-item>
            <el-form-item label="车主境内联系地址" prop="ownerInsideAddr">
              <el-input
                v-model.trim="form.ownerInsideAddr"
                placeholder="请输入车主境内联系地址"
              />
            </el-form-item>
            <el-form-item label="车主境内联系电话" prop="ownerInsideTel">
              <el-input
                v-model.trim="form.ownerInsideTel"
                placeholder="请输入车主境内联系电话"
              />
            </el-form-item>

            <el-form-item label="型号" prop="model">
              <el-input v-model.trim="form.model" placeholder="请输入型号" />
            </el-form-item>

            <el-form-item label="发动机号" prop="veMotorNo">
              <el-input
                v-model.trim="form.veMotorNo"
                placeholder="请输入发动机号"
              />
            </el-form-item>
            <el-form-item label="车身颜色" prop="veBodyColor">
              <el-input
                v-model.trim="form.veBodyColor"
                placeholder="请输入车身颜色"
              />
            </el-form-item>

            <el-form-item label="挂车车架号" prop="trailerFrameNo">
              <el-input
                v-model.trim="form.trailerFrameNo"
                placeholder="请输入挂车车架号"
              />
            </el-form-item>
            <el-form-item label="挂车牌号" prop="trailerLicenseNo">
              <el-input
                v-model.trim="form.trailerLicenseNo"
                placeholder="请输入挂车牌号"
              />
            </el-form-item>

            <el-form-item label="是否限制往返次数" prop="isLimitNum">
              <el-select
                v-model.trim="form.isLimitNum"
                placeholder="请选择是否限制往返次数"
              >
                <el-option
                  v-for="(item, index) in dict.type.sw_vehicle_limit_num"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              label="往返次数"
              prop="limitNum"
              v-if="form.isLimitNum === 'T'"
            >
              <el-input-number
                v-model.trim="form.limitNum"
                :min="0"
                label="请输入往返次数"
              ></el-input-number>
            </el-form-item>
            <el-form-item label="备注" prop="memo" style="width: 66%">
              <el-input
                type="textarea"
                v-model.trim="form.memo"
                placeholder="请输入备注"
              />
            </el-form-item>
            <el-form-item
              label="车前45度照片"
              prop="front45cPic"
              style="width: 50%"
            >
              <fileUpload
                v-model="form.front45cPic"
                :fileType="fileType"
                :fileSize="1"
                :limit="1"
              />
            </el-form-item>
            <el-form-item
              label="车后45度照片"
              prop="back45cPic"
              style="width: 50%"
            >
              <fileUpload
                v-model="form.back45cPic"
                :fileType="fileType"
                :fileSize="1"
                :limit="1"
              />
            </el-form-item>
            <el-form-item
              label="批文扫描图"
              prop="approNoPic"
              style="width: 50%"
            >
              <fileUpload
                v-model="form.approNoPic"
                :fileType="fileType"
                :fileSize="1"
                :limit="1"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="批准行驶口岸列表" name="second">
          <allow-ie-port-list ref="allowPortList" :dialogType="dialogType" :allowPortListData="form.allowPortsList" :customsList="customsList" @selectAllowPort="selectAllowPort"></allow-ie-port-list>
        </el-tab-pane>
      </el-tabs>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 选择企业弹出层 -->
    <select-enterprise
      ref="selectEnt"
      @handleSelected="handleSelected"
    ></select-enterprise>
  </div>
</template>

<script>
import {
  getSwRoadVeRecord,
  addSwRoadVeRecord,
  updateSwRoadVeRecord,
  declModifySwRoadVeRecord
} from "@/api/swdecl/swRoadVeRecord";
import selectEnterprise from "./selectEnterprise.vue";
import AllowIePortList from "../../components/allowIePortList.vue";
export default {
  components: { selectEnterprise, AllowIePortList },
  name: "SwRoadVeRecord-addEdit",
  props: {
    dialogType: {
      type: String,
      default: "add",
    },
    rowData: {
      type: Object,
      default: () => {},
    },
    dict: {},
    customsList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      // 弹出层
      dialogVisible: false,
      activeName: "first",
      // 标题
      title: "新增",
      fileType: ["png", "jpg", "jpeg"],
      baseUrl: process.env.VUE_APP_BASE_FILE_URL,
      // 表单参数
      form: {
        id: null,
        mainPort: null,
        allowIePortList: [],
        coCode: null,
        veTargetNo: null,
        domesticLisenceNo: null,
        domesticLicenseColor: null,
        foreignLicense: null,
        veRegPlace: null,
        veProperty: null,
        veConveyQua: null,
        veCardNo: null,
        veOwnerName: null,
        veOwnerNo: null,
        ownerInsideAddr: null,
        ownerInsideTel: null,
        veType: null,
        brand: null,
        model: null,
        exhaustCapacity: null,
        veFactoryDate: null,
        veMotorNo: null,
        veFrameNo: null,
        veTon: null,
        selfWt: null,
        allowTowTotalWt: null,
        containerInnerLength: null,
        containerInnerWidth: null,
        containerInnerHeight: null,
        outerLength: null,
        outerWidth: null,
        outerHeight: null,
        veBodyColor: null,
        oilBoxCapcity: null,
        apprNo: null,
        apprPeriod: null,
        currApplyBussiness: null,
        front45cPic: null,
        back45cPic: null,
        memo: null,
        proposer: null,
        proposeTime: null,
        veClassFlag: null,
        operationType: null,
        trailerLicenseNo: null,
        trailerFrameNo: null,
        approNoPic: null,
        nationality: null,
        isLimitNum: null,
        limitNum: null,
        createTime: null,
        createBy: null,
        updateTime: null,
        updateBy: null,
        declStatus: null,
        rcptStatus: "0",
        rcptRemark: null,
      },
      // 运管备案查询表格数据
      swRoadVeRecordList: [],
      // 表单校验
      rules: {
        mainPort: [
          {
            required: true,
            message: "主管海关代码不能为空",
            trigger: "change",
          },
        ],
        // coCode: [
        //   { required: true, message: "企业代码不能为空", trigger: "blur" },
        // ],
        // veTargetNo: [
        //   { required: true, message: "车辆指标编号不能为空", trigger: "blur" },
        // ],
        // domesticLisenceNo: [
        //   { required: true, message: "国内车牌不能为空", trigger: "blur" },
        // ],
        // domesticLicenseColor: [
        //   { required: true, message: "国内车牌颜色不能为空", trigger: "blur" },
        // ],
        // foreignLicense: [
        //   { required: true, message: "外籍车牌不能为空", trigger: "blur" },
        // ],
        allowIePortList: [
          { required: true, message: "批准行驶口岸不能为空", trigger: "blur" },
        ],
        veRegPlace: [
          { required: true, message: "车辆注册地不能为空", trigger: "blur" },
        ],
        veProperty: [
          { required: true, message: "使用性质不能为空", trigger: "blur" },
        ],
        veConveyQua: [
          { required: true, message: "车辆运输资格不能为空", trigger: "blur" },
        ],
        // veCardNo: [
        //   {
        //     required: true,
        //     message: "车辆行驶证编号不能为空",
        //     trigger: "blur",
        //   },
        // ],
        // veOwnerName: [
        //   {
        //     required: true,
        //     message: "车辆登记车主名称不能为空",
        //     trigger: "blur",
        //   },
        // ],
        // veOwnerNo: [
        //   {
        //     required: true,
        //     message: "车辆登记车主证件号码不能为空",
        //     trigger: "blur",
        //   },
        // ],
        // ownerInsideAddr: [
        //   {
        //     required: true,
        //     message: "车主境内联系地址不能为空",
        //     trigger: "blur",
        //   },
        // ],
        // ownerInsideTel: [
        //   {
        //     required: true,
        //     message: "车主境内联系电话不能为空",
        //     trigger: "blur",
        //   },
        // ],
        veType: [
          {
            required: true,
            message: "车辆类型(型样)不能为空",
            trigger: "change",
          },
        ],
        brand: [{ required: true, message: "厂牌不能为空", trigger: "blur" }],
        // model: [{ required: true, message: "型号不能为空", trigger: "blur" }],
        exhaustCapacity: [
          { required: true, message: "排气量不能为空", trigger: "blur" },
        ],
        veFactoryDate: [
          {
            required: true,
            message: "车辆出厂日期不能为空",
            trigger: "blur",
          },
        ],
        // veMotorNo: [
        //   { required: true, message: "发动机号不能为空", trigger: "blur" },
        // ],
        veFrameNo: [
          { required: true, message: "车架号不能为空", trigger: "blur" },
        ],
        veTon: [
          {
            required: true,
            message: "核定载客/核定载质量不能为空",
            trigger: "blur",
          },
        ],
        selfWt: [{ required: true, message: "自重不能为空", trigger: "blur" }],
        allowTowTotalWt: [
          { required: true, message: "准牵引总质量不能为空", trigger: "blur" },
        ],
        containerInnerLength: [
          { required: true, message: "货箱内部长度不能为空", trigger: "blur" },
        ],
        containerInnerWidth: [
          { required: true, message: "货箱内部宽度不能为空", trigger: "blur" },
        ],
        containerInnerHeight: [
          { required: true, message: "货箱内部尺寸不能为空", trigger: "blur" },
        ],
        outerLength: [
          { required: true, message: "外廓长度不能为空", trigger: "blur" },
        ],
        outerWidth: [
          { required: true, message: "外廓宽度不能为空", trigger: "blur" },
        ],
        outerHeight: [
          { required: true, message: "外廓高度不能为空", trigger: "blur" },
        ],
        // veBodyColor: [
        //   { required: true, message: "车身颜色不能为空", trigger: "blur" },
        // ],
        oilBoxCapcity: [
          { required: true, message: "油箱容量不能为空", trigger: "blur" },
        ],
        apprNo: [
          {
            required: true,
            message: "批文/许可证编号不能为空",
            trigger: "blur",
          },
        ],
        apprPeriod: [
          {
            required: true,
            message: "批文/许可证有效期不能为空",
            trigger: "blur",
          },
        ],
        currApplyBussiness: [
          {
            required: true,
            message: "最新更新申请业务类型不能为空",
            trigger: "blur",
          },
        ],
        // front45cPic: [
        //   { required: true, message: "车前45度照片不能为空", trigger: "blur" },
        // ],
        // back45cPic: [
        //   { required: true, message: "车后45度照片不能为空", trigger: "blur" },
        // ],
        proposer: [
          { required: true, message: "申请人不能为空", trigger: "blur" },
        ],
        veClassFlag: [
          {
            required: true,
            message: "车辆分类不能为空",
            trigger: "blur",
          },
        ],
        operationType: [
          {
            required: true,
            message: "数据操作类型不能为空",
            trigger: "change",
          },
        ],
        // trailerFrameNo: [
        //   { required: true, message: "挂车车架号不能为空", trigger: "blur" },
        // ],
        // approNoPic: [
        //   { required: true, message: "批文扫描图不能为空", trigger: "blur" },
        // ],
        nationality: [
          { required: true, message: "国籍不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    open() {
      this.dialogVisible = true;
      this.activeName = "first";
      this.$nextTick(() => {
        if (this.dialogType == "add") {
          this.title = "新增";
        } else if (this.dialogType == "edit") {
          this.title = "编辑";
          this.loadDetail();
        } else if (this.dialogType == "declModify") {
          this.title = "变更申报";
          this.loadDetail();
        }
      });
    },
    close() {
      this.activeName = "second";
      this.$refs.allowPortList.tableData = [];
      this.$refs["form"].resetFields();
      this.dialogVisible = false;
    },

    // 获取详情
    loadDetail() {
      const id = this.rowData.id;
      getSwRoadVeRecord(id).then((res) => {
        if (res.code == 200) {
          this.form = res.data;
          this.form.veConveyQua = this.form.veConveyQua.split(",");
          this.form.allowIePortList = res.data.allowPortsList;
        }
      });
    },
    // 选择企业
    coCodeFocus() {
      this.$refs.selectEnt.open();
    },
    handleSelected(val) {
      this.form.coCode = val.coCode;
    },
    selectAllowPort(val) {
      let arr = val.map(item => {
        return {
          ...item,
          portCode: item.portCode.join(",")
        }
      })
      this.form.allowIePortList = arr;
    },
    // 提交表单
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if(this.form.allowIePortList.length === 0) {
            this.$message.error("请至少添加一个批准行驶口岸！")
            return false;
          }

          let params = {
            ...this.form,
          };
          params.veConveyQua = this.form.veConveyQua.join(",");
          if (this.dialogType == "add") {
            addSwRoadVeRecord(params).then((res) => {
              if (res.code === 200) {
                this.$modal.msgSuccess("新增成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          } else if (this.dialogType == "edit") {
            updateSwRoadVeRecord(params).then((res) => {
              if (res.code === 200) {
                this.$modal.msgSuccess("修改成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          } else if (this.dialogType == "declModify") {
            declModifySwRoadVeRecord(params).then((res) => {
              if (res.code === 200) {
                this.$modal.msgSuccess("变更申报成功");
                this.close();
                this.$emit("handleQuery");
              }
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped></style>
